<template>
  <div>

    <sky-panel title="容器面板">
      <template v-slot:header>
        <span>此处附标题</span>
      </template>
      <template  v-slot:handle>
        按钮插槽位置
      </template>
      <template v-slot:main>

         <div style="padding:20px">
            主题内容区域（通常插入表格）
         </div>
        

      </template>
    </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

          &lt;sky-panel title="容器面板"&gt;
            &lt;template v-slot:header&gt;
              &lt;span&gt;此处附标题&lt;/span&gt;
            &lt;/template&gt;
            &lt;template  v-slot:handle&gt;
              按钮插槽位置
            &lt;/template&gt;
            &lt;template v-slot:main&gt;

              &lt;div style="padding:20px"&gt;
                  主题内容区域（通常插入表格）
              &lt;/div&gt;

            &lt;/template&gt;
          &lt;/sky-panel&gt;

        </code>
    </pre>
    </div>
  </sky-code-panel>



  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  // setup() {
    
  // },
})
</script>
